import { useParams } from "react-router-dom";
import { useEffect, useState } from 'react'
import axios from 'axios';
import { Breadcrumb,Avatar, Table, } from 'antd';
import { Link } from "react-router-dom";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  LogoutOutlined,
  UserOutlined
} from '@ant-design/icons';
import './index.scss'
const Coursetimetable = () => {
  let { id } = useParams(); // 使用useParams hook获取URL参数中的id
  const [hovered, setHovered] = useState(false);
  const [teacherData, setteacherData] = useState(null);
  const [studentData, setstudentData] = useState(null);
  const [courseData, setcourseData] = useState("1");
  useEffect(() => {
    const courseid = id;
    axios.post('http://localhost:8000/gettaketeacher', { courseid: courseid })
    .then(response => {
      // 处理从后端返回的数据
      console.log(response.data);
      setteacherData(response.data);
    })
    .catch(error => {
      console.error('Error:', error);
    });

    axios.post('http://localhost:8000/getstudents', { courseid: courseid })
    .then(response => {
      // 处理从后端返回的数据
      console.log(response.data);
      setstudentData(response.data);
    })
    .catch(error => {
      console.error('Error:', error);
    });

    axios.post('http://localhost:8000/courseinformation', { courseid: courseid })
    .then(response => {
      // 处理从后端返回的数据
      console.log(response.data);
      setcourseData(response.data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }, []);

  const handleImageClick = () => {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*'; // 只允许选择图片文件
    fileInput.onchange = (e) => {
      const file = e.target.files[0];
      if (file) {
        // 执行上传逻辑
        uploadFileToServer(file);
      }
    };
    fileInput.click();
  };
  
  const uploadFileToServer = (file) => {
    const formData = new FormData();
    formData.append('file', file); // 使用 'file' 作为参数名
    formData.append('studentid', courseData[0].courseid);
    formData.append('avatar', courseData[0].img);
  
    fetch('http://localhost:8000/courseupload', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      // 处理响应
      const courseid = id;
      axios.post('http://localhost:8000/courseinformation', { courseid: courseid })
      .then(response => {
        // 处理从后端返回的数据
        console.log(response.data);
        setcourseData(response.data);
      })
      .catch(error => {
        console.error('Error:', error);
      });
    })
    .catch(error => {
      // 处理错误
    });
  };

  const columns = [
    {
      title: '学号',
      dataIndex: 'studentid',
      width: 120
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      render: avatar => <Avatar size={48} src={avatar ? `http://localhost:8000/${avatar}` : undefined} icon={!avatar && <UserOutlined />}  />
    },
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '年级',
      dataIndex: 'grade'
    },
    {
      title: '班级',
      dataIndex: 'class'
    },
    {
      title: '专业',
      dataIndex: 'major'
    },
  ]
  return (
    <div>
      <Breadcrumb>
        <Breadcrumb.Item><Link to="/Layoutstudent/timetable">Timetable</Link></Breadcrumb.Item>
        <Breadcrumb.Item>课程名称：{courseData[0].coursename}</Breadcrumb.Item>
      </Breadcrumb>
      <h1>{courseData[0].coursename}</h1>
      <p> ID: {id}</p>
      <p>授课教师: {teacherData &&teacherData.map(teacher => teacher.username).join(', ')}</p>
      <Avatar.Group maxCount={2}>
  {teacherData && teacherData.map(teacher => (
    <Avatar 
      size={48} 
      src={teacher.avatar ? `http://localhost:8000/${teacher.avatar}` : undefined} 
      icon={!teacher.avatar && <UserOutlined />} 
    />
  ))}
</Avatar.Group>


      <div style={{ display: 'flex' }}>

      <div style={{ position: 'relative', display: 'inline-block', width: '30%', height: '200px' }}>
      <img
        src={courseData[0].img ? `http://localhost:8000/${courseData[0].img}` : "http://localhost:8000/class/669ca80d6a0c5f74835bb936a41aabca.jpg"}
        alt="Course Image"
        style={{ width: '100%', height: '100%', objectFit: 'cover', filter: hovered ? 'blur(3px)' : 'none' }}
      />
    </div>


      {/* 显示课程详情内容 */}
        <div className="information">
        <p>属性:{courseData[0].attribute}</p>
        <p>开课学院:{courseData[0].college} </p>
        <p>开课学期:{courseData[0].term}</p>
        <p>课程节数:{courseData[0].number} </p>
        <p>上课时间:{courseData[0].time}</p>
        <p>上课地点:{courseData[0].location}</p>
        <p>开课学院:{courseData[0].college} </p>
        <p>最大学生数:{courseData[0].studentnum}</p>
        <p>当前学生数:{courseData[0].num} </p>
        </div>
      </div>
      <h1>学生名单</h1>
      <Table
      rowKey="id"
      columns={columns}
      dataSource={studentData}
      pagination={false} // 去除页码
      scroll={{ x: 1000 }} // 设置宽度
    />
    </div>
  );
};
export default Coursetimetable;